<template>
  <div class="page-container">
    <div ref="chart" class="container-charts"></div>
  </div>
</template>

<script>
import { plantingAreaTop } from "../request/api";
export default {
  data() {
    return {};
  },
  mounted() {
    //组件一加载开始初始化
    this.init(),
    this.getData();
    //页面加载调自适应函数
    this.screen()
    //窗口监听事件
    window.addEventListener("resize",this.screen)
  },
  //销毁
  destroyed(){
    window.removeEventListener("resize",this.screen)
  },
  methods: {
    init() {
      // 1、获取图表容器节点
      let chart = this.$refs.chart;
      //2、初始化echarts
      let myChart = this.$echart.init(chart);
      this.info = myChart;
      //3、初始化配置项
      let options = {
        //3.1标题
        title: {
          text: "各地区种植面积统计TOP10",
          left: 20,
          top: 20,
        },
        grid:{
          show:true,
          left:10,
          right:10,
          top:10,
          bottom:10
        },
        //3.2x轴
        xAxis: {
          type: "value",
          axisLine: {//是否显示坐标轴线
            
            //数据线
            show: true,
          },
          axisTick: {
            show: true,
          },
        },
        //3.3y轴
        yAxis: {
          type: "category",
          // data:yData
        },
        // 3.4数据列
        series: [
          {
            type: "bar",
            // data:sData,
            label: {
              //是否显示标签
              show: true,
              position: "right",
            },
            itemStyle: {
              //各项的样式
              color: {
                type: "inherit",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
          colorStops: [
                                    {
                                        offset: 0,
                                        color: '#0F3357'
                                    },
                                    {
                                        offset: 1,
                                        color: '#36BFE5'
                                    }
                                ]
              },
            },
                emphasis:{
       itemStyle: {
                        color: '0F3357',   //hover时改变柱子颜色
                        // shadowColor: 'rgba(102,102,102,0.50)',
                        // shadowOffsetX: 0,
                        // shadowOffsetY: 2,
                        // shadowBlur: 6,
                     
                    }

    }
          },
        ],
        //3.5显示提示框
        tooltip: {
          show: true,
        },
        //3.6坐标轴指示器
        axisPointer: {
          show: true,
          type: "shadow",
        },
        //3.7工具栏
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              //下载图片
              show: true,
            },
            restore: {
              //还原
              show: true,
            },
            dataView: {
              show: true,
            },
            magicType: {
              type: ["line", "bar"],
            },
          },
        },
        grid: {
          left: "10%",
          top: "18%",
          right: "10%",
          bottom: "10%",
        },
      };
      //4、给echarts设置配置项内容
      myChart.setOption(options);
    },
    //封装一个获取数据的方法
    async getData() {
      let result = await plantingAreaTop();
      // console.log(result,"dsafaaaaaadsfsd");
      result.data.sort((a, b) => {
        return a.area - b.area;
      });

      let yData = result.data.map((item) => item.name);
      let sData = result.data.map((item) => item.area);
      this.setEchart(yData, sData);
    },
    setEchart(yData, sData) {
      let options = {
        yAxis: {
          type: "category",
          data: yData,
        },
        series: [
          {
            type: "bar",
            data: sData,
          },
        ],
      };
      this.info.setOption(options);
    },
    //图表自适应
    screen(){
      //resize   专门做自适应
      this.info.resize()
      let width = this.$refs.chart.offsetWidth;

      //自适应字体
      let num = (width/100)*6;

      //重置配置项字体大小
      let options={
        title:{
          textStyle:{
            fontSize:num,
          }
        }
      };
      this.info.setOption(options)
    }
  },
};
</script>

<style lang="" scoped>
</style>
